<template>
  <div>
    <div class="remind">
      <div>{{title1}}</div>
      <div class="end">{{title2}}</div>
      <div class="timer">
        <van-count-down :time="time">
          <template v-slot="timeData">
            <span class="item">{{ timeData.hours | fmtTime }}</span
            ><span class="semicolon">:</span>
            <span class="item">{{ timeData.minutes | fmtTime }}</span
            ><span class="semicolon">:</span>
            <span class="item">{{ timeData.seconds | fmtTime }}</span>
          </template>
        </van-count-down>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    props:["title1","title2"],
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      timeData: {},
    };
  },
  filters: {
    fmtTime(val) {
      return val >= 10 ? val : "0" + val;
    },
  },
};
</script>
<style lang="less" scoped>
.remind {
  font-size: 26px;
  display: flex;
  top: 140px;
  position: absolute;
  width: 700px;
  background-color: #fff;
  margin-left: 25px;
  height: 64px;
  line-height: 64px;
  border-radius: 15px;
  padding: 0 15px;
  .end {
    margin: 0 0 0 170px;
  }
  .timer {
    /*margin-left: 10px;*/
    .semicolon {
      color: #fa6426;
      font-weight: 700;
    }
  }
}

</style>
